<template>
  <ocean :use="dialog.modal">
    <div class="theme_box ocean_dialog" style="overflow:inherit;">
      <n-layout>
        <n-layout-header style="margin-bottom: 10px;">
          <div v-if="$slots.title">
            <slot name="title"></slot>
          </div>
          <div v-else class="title">{{ title }}</div>
        </n-layout-header>

        <n-layout-content content-style="padding: 0px;" style="margin-bottom:20px;">
          <div v-if="$slots.default">
            <slot></slot>
          </div>
          <div v-else-if="dialog.component">
            <component :is="dialog.component()" v-bind="dialog.componentAttrs" ref="componentRef"></component>
          </div>
        </n-layout-content>

        <n-layout-footer class="action">
          <n-space justify="end" v-if="$slots.action">
            <slot name="action"></slot>
          </n-space>
          <n-space justify="end" v-else-if="dialog.buttons.length">
            <ocean :use="dialog.buttons"></ocean>
          </n-space>
        </n-layout-footer>
      </n-layout>
    </div>
  </ocean>
</template>

<script lang="tsx" setup>
import { computed, onMounted, ref } from 'vue';
const props = defineProps<{
  ocean: any,
  title?: string,
}>()

const dialog = computed(() => props.ocean);

const componentRef = ref();

onMounted(() => {
  dialog.value.setRef(componentRef)
})
</script>

<style lang="scss" scoped>
.ocean_dialog {
  position: relative;
  min-width: 200px;
  min-height: 100px;
  box-shadow: 0 0 20px 0px rgb(25, 25, 25) !important;
  padding: 20px;
  border-radius: 20px !important;
  background: #fff;

  .title {
    font-size: 18px;
    font-weight: 400;
  }

  .actions {
    margin-top: 10px;
  }
}
</style>